<template>
  <div class="productionDesign_box myStyle energyBox">
    <div
      id="tags-view-container"
      class="tags-view-container"
      v-if="query.title"
    >
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
          {{ query.title }}
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle2 title="实时数据" class="float margin" style="width: 99%">
          <div slot="select" class="top-all">
            产量计算：{{ top2.dayBotleCountPing || 0 }}瓶；{{
              top2.dayBotleCount || 0
            }}箱
          </div>
          <!-- <el-date-picker slot="select" style="width:300px" value-format="yyyy-MM-dd" size="mini" v-model="topForm" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker> -->
          <div class="boxcontent" slot="content">
            <Nodata v-if="top.length == 0" />
            <div class="equipment" v-for="(item, index) in top" :key="index">
              <nav>{{ item.name }}</nav>
              <div class="equipment_content">
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">单瓶用电量：</div>
                  <div class="equipment_content_item_right">
                    {{ item.dp || 0 }} /kw·h
                  </div>
                </div>
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">标准箱用电量：</div>
                  <div class="equipment_content_item_right">
                    {{ item.bzx || 0 }} /kw·h
                  </div>
                </div>
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">每度电产量：</div>
                  <div class="equipment_content_item_right">
                    {{ item.md || 0 }} /瓶
                  </div>
                </div>
                <div class="equipment_content_item flex_center">
                  <div class="equipment_content_item_left">总用电量：</div>
                  <div class="equipment_content_item_right">
                    {{ item.zl || 0 }} /kw·h
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_bottom">
        <StrokeTitle2
          title="近三十天用电量分析"
          class="float margin"
          style="width: 99%"
        >
          <div class="flex_center" slot="select">
            <el-select
              v-model="isBottom30"
              placeholder="请选择"
              size="mini"
              style="width: 160px"
            >
              <el-option label="近三十天用电量分析" value="近三十天用电量分析">
              </el-option>
              <el-option label="当年十二月用电量" value="当年十二月用电量">
              </el-option>
            </el-select>
            <div class="all_box all_box2" @click="openDialog">统计分析</div>
            <el-select
              v-model="bottomForm.searchValue"
              placeholder="请选择"
              size="mini"
              style="width: 120px"
              @change="recentTime"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <ElementSelect
              url="/system/dict/data/sevenList"
              ref="psNameSelect"
              :isClearable="false"
              :isAll="true"
              :formData="{ dictType: 'product_report_type' }"
              :isSelected="true"
              style="margin-left: 2px"
              @select="selectList2"
              :settings="settings"
            />
          </div>
          <MoreDirection
            gridLeft="4%"
            v-if="isBottom30 == '近三十天用电量分析'"
            gridRight="2.5%"
            :isTooltipY="false"
            :data="bottom"
            tooltipLabel=""
            :legendData="['用电量']"
            :isMoretooltip="true"
            :isCategory="false"
            barWidth="13"
            style="height: calc(100% - 0px)"
            :yAxisLineShow="true"
            :xAxisLineShow="true"
            yUnit="kw·h"
            slot="content"
          />
          <MoreDirection
            gridLeft="4%"
            v-else
            gridRight="2.5%"
            :isTooltipY="false"
            :data="bottom2"
            tooltipLabel=""
            :legendData="['用电量']"
            :isMoretooltip="true"
            :isCategory="false"
            barWidth="13"
            style="height: calc(100% - 0px)"
            :yAxisLineShow="true"
            :xAxisLineShow="true"
            yUnit="kw·h"
            slot="content"
          />
        </StrokeTitle2>
      </div>
    </div>
    <el-dialog
      title="统计分析"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="650px"
      :modal-append-to-body="false"
    >
      <el-form :inline="true" class="demo-form-inline flex_center">
        <el-form-item>
          <el-date-picker
            :clearable="false"
            style="width: 200px"
            value-format="yyyy-MM-dd"
            size=""
            @change="dateChange"
            v-model="dateArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <ElementSelect
            url="/system/dict/data/sevenList"
            ref="psNameSelect"
            :isClearable="false"
            :isAll="true"
            :formData="{ dictType: 'product_report_type' }"
            :isSelected="true"
            @select="selectList"
            :settings="settings"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dialogForm.devName"
            placeholder="请选择"
            @change="recentTime"
          >
            <!-- <el-option label="全部" value="all"> </el-option>
            <el-option label="吹灌旋一体机电表" value="1"> </el-option>
            <el-option label="贴标机电表" value="2"> </el-option>
            <el-option label="纸包机电表" value="3"> </el-option>
            <el-option label="膜包机电表" value="4"> </el-option>
            <el-option label="码垛机电表" value="5"> </el-option>
            <el-option label="高压空压机电表" value="6"> </el-option>
            <el-option label="低压空压机电表" value="7"> </el-option>
            <el-option label="水处理电表" value="8"> </el-option> -->
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="equipment_content">
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">总用电量：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p1 || 0 }} /kw·h
          </div>
        </div>
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">总生产量（瓶）：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p2 || 0 }} /瓶
          </div>
        </div>
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">总生产量（标准箱）：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p3 || 0 }} /标准箱
          </div>
        </div>
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">单瓶用电量：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p4 || 0 }} /kw·h
          </div>
        </div>
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">标准箱用电量：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p5 || 0 }} /kw·h
          </div>
        </div>
        <div class="equipment_content_item flex_center">
          <div class="equipment_content_item_left">每度电产量：</div>
          <div class="equipment_content_item_right">
            {{ dialogData.p6 || 0 }} /瓶
          </div>
        </div>
        <div
          style="
            width: 100%;
            text-align: center;
            color: #ffffff;
            margin-top: 30px;
          "
          v-show="isLoading"
        >
          数据加载中...
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  RecentTime,
  GetDLYBJK,
  RegionTimeRegion,
  RecentTime12,
} from "@/api/echarts/enery/index";
import { GetBottleDay, GetBoxDay } from "@/api/echarts/index";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
export default {
  components: {
    StrokeTitle2,
  },
  name: "Energy",
  data() {
    return {
      settings: {
        placeholder: "请选择",
        isSelected: true,
        isMultiple: false,
        label: "dictLabel",
        value: "dictValue",
      },
      model: "month",
      isLoading: false,
      //实时数据
      top: [],
      //产量计算
      top2: { dayBotleCount: 0, dayBotleCountPing: 0 },
      //近三十天用电量分析表单
      bottomForm: { searchValue: "1", jsrq: "", ksrq: "", ggname: "all" },
      //近三十天用电量分析选择器列表
      options: [
        { label: "全部", value: "1" },
        { label: "吹灌旋一体机电表", value: "a8" },
        { label: "贴标机电表", value: "a10" },
        { label: "纸包机电表", value: "a12" },
        { label: "膜包机电表", value: "a14" },
        { label: "码垛机电表", value: "a16" },
        { label: "高压空压机电表", value: "a20" },
        { label: "低压空压机电表", value: "a18" },
        { label: "水处理电表", value: "a28" },
      ],
      //近三十天用电量分析
      bottom: [],
      //当年十二月用电量分析
      bottom2: [],
      //近三十天用电量分析是否显示
      isBottom30: "近三十天用电量分析",
      //弹窗是否显示
      dialogVisible: false,
      dateArr: [],
      //弹窗表单
      dialogForm: { jsrq: "", ksrq: "", ggname: "all", devName: "1" },
      //统计分析数据
      dialogData: { p1: 0, p2: 0, p3: 0, p4: 0, p5: 0, p6: 0 },
      //定时器
      timer: null,
      //路由信息
      query: { title: "" },
    };
  },
  activated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = setInterval(() => {
      //产量统计-当日产量(瓶)
      this.getBottleDay();
      //产量统计-当日产量箱
      this.getBoxDay();
      //实时数据
      this.getDLYBJK();
    }, 10000);
    this.dateArr = this.$getCustomizeDay();
     this.bottomForm.ksrq = this.dateArr[0]+' 00:00:00';
    this.bottomForm.jsrq = this.dateArr[1]+' 23:59:59';
    this.dialogForm.ksrq = this.dateArr[0]+' 00:00:00';
    this.dialogForm.jsrq = this.dateArr[1]+' 23:59:59';
    this.onload();
    if (this.$route.query.title) {
      this.query = this.$route.query;
    } else {
      this.query = { title: "" };
    }
  },
  deactivated() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    onload() {
      //近三十天用电量分析
      this.recentTime();
      //当年十二月用电量
      this.recentTime12();
      //统计分析
      this.regionTimeRegion();
      //产量统计-当日产量(瓶)
      this.getBottleDay();
      //产量统计-当日产量箱
      this.getBoxDay();
      //实时数据
      this.getDLYBJK();
    },
    //产量统计-当日产量箱
    getBoxDay() {
      GetBoxDay().then((res) => {
        if (res.code == 200) {
          this.top2.dayBotleCount = res.data.bottle;
          this.top2.dayBotleCount = Number(this.top2.dayBotleCount).toFixed();
        }
      });
    },
    //产量统计-当日产量(瓶)
    getBottleDay() {
      GetBottleDay().then((res) => {
        if (res.code == 200) {
          this.top2.dayBotleCountPing = res.data.bottle;
          this.top2.dayBotleCountPing = Number(
            this.top2.dayBotleCountPing
          ).toFixed();
        }
      });
    },
    //实时数据
    getDLYBJK() {
      GetDLYBJK().then((res) => {
        if (res.code == 200) {
          this.top = res.data;
          for (let item of this.top) {
            item.dp = Number(item.dp).toFixed(4);
            item.bzx = Number(item.bzx).toFixed(4);
            item.md = Number(item.md).toFixed(0);
            item.zl = Number(item.zl).toFixed(4);
          }
        }
      });
    },
    //近三十天用电量分析品类切换
    selectList2(e) {
      if (e) {
        this.bottomForm.ggname = e;
      } else {
        this.bottomForm.ggname = "all";
      }
      this.recentTime();
      //当年十二月用电量
      this.recentTime12();
    },
    //近三十天用电量分析
    recentTime() {
      RecentTime(this.bottomForm).then((res) => {
        if (res.code == 200) {
          this.bottom = [];
          for (var i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.name = res.data[i].name;
            obj.value1 = Number(res.data[i].value).toFixed(0);
            obj.valueArr = res.data[i].valueArr;
            obj.valueArr = obj.valueArr.concat(res.data[i].bigArr);
            this.bottom.push(obj);
          }
        }
      });
      //当年十二月用电量
      this.recentTime12();
    },
    //当年十二月用电量分析
    recentTime12() {
      RecentTime12(this.bottomForm).then((res) => {
        if (res.code == 200) {
          this.bottom2 = [];
          for (var i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.name = res.data[i].name;
            obj.value1 = res.data[i].value;
            obj.valueArr = res.data[i].valueArr;
            obj.valueArr = obj.valueArr.concat(res.data[i].bigArr);
            this.bottom2.push(obj);
          }
        }
      });
    },
    //统计分析
    regionTimeRegion() {
      RegionTimeRegion(this.dialogForm)
        .then((res) => {
          if (res.code == 200) {
            this.dialogData = res.data;
            this.dialogData.p1 = Number(this.dialogData.p1).toFixed(4);
            this.dialogData.p2 = Number(this.dialogData.p2).toFixed(0);
            this.dialogData.p3 = Number(this.dialogData.p3).toFixed(0);
            this.dialogData.p4 = Number(this.dialogData.p4).toFixed(4);
            this.dialogData.p5 = Number(this.dialogData.p5).toFixed(4);
            this.dialogData.p6 = Number(this.dialogData.p6).toFixed(4);
          }
          this.isLoading = false;
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    selectList(e) {
      if (e) {
        this.dialogForm.ggname = e;
      } else {
        this.dialogForm.ggname = "all";
      }
    },
    //打开弹窗
    openDialog() {
      this.dialogVisible = true;
      //统计分析
      this.regionTimeRegion();
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //弹窗日期切换
    dateChange(event) {
      this.dialogForm.ksrq = event[0] + " 00:00:00";
      this.dialogForm.jsrq = event[1] + " 23:59:59";
    },
    //查询
    onSubmit() {
      //统计分析
      this.isLoading = true;
      this.regionTimeRegion();
    },
  },
};
</script>

<style lang="scss" scoped>
.productionDesign_box {
  .content {
    width: 100%;
    overflow-x: hidden;
    .content_top,
    .content_bottom,
    .content_center {
      width: 100%;
      height: 525px;
      .boxcontent {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-wrap: break-word;
        word-break: break-all;
        padding-bottom: 15px;
      }
      .top-all {
        color: #ffffff;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    .boxcontent::-webkit-scrollbar {
      width: 1px !important;
      height: 7px !important;
      cursor: pointer !important;
    }
    .content_bottom {
      height: calc(100% - 565px);
    }
    .Echarts {
      height: calc(100% - 50px);
    }
    @media screen and (max-width: 1000px) {
      .content_top {
        height: 445px;
      }
      .content_bottom {
        height: calc(100% - 485px);
      }
      .top-all {
        font-size: 16px;
      }
    }
  }
  .equipment {
    float: left;
    width: 22.5%;
    height: 220px;
    background-size: 100% 100%;
    background-image: url("~@/assets/images/lcd.png");
    margin: 15px 0 0 2%;
    nav {
      width: 100%;
      text-align: center;
      color: white;
      margin-top: 15.5px;
      font-size: 15px;
    }
  }

  .equipment_content {
    width: 80%;
    height: 145px;
    margin: 15px 0 0 10%;
    .equipment_content_item {
      width: 100%;
      height: 21%;
      margin-top: 2%;
      .equipment_content_item_left,
      .equipment_content_item_right {
        width: 38%;
        height: 100%;
        text-align: center;
        color: white;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 12px;
      }
      .equipment_content_item_right {
        width: 62%;
        justify-content: center;
        background-size: 100% 100%;
        color: #0afbfd;
        font-size: 14px;
        background-image: url("~@/assets/images/lcdBox.png");
      }
    }
  }
  @media screen and (max-width: 1000px) {
    .equipment {
      height: 180px;
      margin: 15px 0 0 2%;
      nav {
        margin-top: 11.5px;
        font-size: 13px;
      }
    }

    .equipment_content {
      height: 105px;
    }
  }
  .all_box2 {
    width: 100px;
    background: url("~@/assets/images/echarts/tabsel.png") !important;
    background-size: 100% 100% !important;
    color: #31d7ce !important;
  }
}
</style>
<style>
.energyBox .el-dialog__body {
  min-height: 350px;
}
.energyBox .el-dialog {
  min-width: 350px !important;
}
</style>
